<template>
  <!-- 选择支付方式 -->
  <div class="payWay">
    <div class="orderMsg">
      <div class="left">
        <div class="top">
          <div>订单提交成功，请尽快支付</div>
          <div>订单号：{{orderData.outTradeNo}}</div>
        </div>
      </div>
      <div class="right">
        <p>
          应付金额：
          <span style="color:red">{{orderData.totalAmount}}</span>元
        </p>
      </div>
    </div>
    <div class="openPay">
      <h3>支付方式</h3>

      <el-radio-group class="fourWay" v-model="payWay">
        <div>
          <img src="../assets/zfb.png" alt />
          <el-radio :label="1">支付宝支付</el-radio>
        </div>
        <div>
          <img src="../assets/wx.png" alt />
          <el-radio :label="2">微信支付</el-radio>
        </div>
        <div>
          <img src="../assets/dg.png" alt />
          <el-radio :label="3">对公汇款</el-radio>
        </div>
        <div>
          <img src="../assets/yl.png" alt />
          <el-radio :label="4">银联支付</el-radio>
        </div>
      </el-radio-group>
      <el-button type="primary" @click="pay">支付</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["orderData"],
  data() {
    return {
      payWay: "",
      time: "",
    };
  },
  created() {},
  methods: {
    pay() {
      console.log(this.payWay);
      // 如果为1或者为2时 发送支付宝微信
      if (this.payWay == 1 || this.payWay == 2) {
        console.log("dkfjshfjhds");
        this.$post("/gg/dyPay/pay", {
          orderId: this.orderData.id,
          payType: this.payWay,
        }).then((res) => {
          console.log(res.data);
          if (res.data.data.code_url) {
            this.bus.$emit("code", res.data.data.code_url);
          } else {
            window.location.href = res.data.data;
          }
        });
      } else if (this.payWay == 3) {
        // 如果为3修改订单状态 为对公汇款
        this.$post("/gg/userOrder/updateById", {
          id: this.orderData.id,
          payStatus: this.payWay,
          payChannel:'凭证支付'
        }).then((res) => {
          console.log(res);
          location.href = "/package/pay/" + this.orderData.id;
        });
      } else if (this.payWay == 4) {
        this.$message("暂时没有此支付方式");
      }
    },
  },
};
</script>
<style scoped>
.orderMsg {
  width: 1100px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 15px;
  /* background-color: #eee; */
}
.orderMsg div {
  line-height: 30px;
}

.top {
  display: flex;
}
.top div:nth-of-type(2) {
  margin-left: 60px;
}
.right {
  display: flex;
  width: 300px;
  justify-content: space-between;
}
.openPay {
  width: 100%;
  height: 500px;
  border: 1px solid;
  margin-top: 20px;
}
.openPay h3 {
  margin: 30px;
}
.fourWay {
  /* background-color: #eee; */
  width: 400px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fourWay div {
  text-align: center;
  width: 70px;
  height: 50px;
  font-size: 14px;
  /* background-color: palegreen; */
}
.fourWay img {
  width: 40px;
  height: 40px;
}
.openPay .el-button {
  width: 120px;
  margin: 140px 80px;
}
</style>